import React, {Component} from 'react'
import {
    Text,
    View,
    StyleSheet,
    Button,
    TextInput,
    Image,
    FlatList,
    ScrollView,
    InteractionManager,
    Animated,
    TouchableOpacity, TouchableHighlight, ViewStyle
} from 'react-native'
import {inject, observer} from "mobx-react";
import {Actions} from "react-native-router-flux";
import styles, {roundWithSize} from "../../style";
import CommonInput from "../../component/common/CommonInput";
import {Store} from "../../store";
import toast from "../../component/common/ToastProxy";
import {alertProxy} from "../../component/common/AlertProxy";
import * as _ from 'lodash'
import {afterAnimation} from "../../util";

interface ShareCodeProps extends Store {
}

interface ShareCodeState {
    code: string
}

@inject("user")
@observer
export default class ShareCode extends Component<ShareCodeProps, ShareCodeState> {
    state = {
        code: null
    };
    submitForm = async () => {
        if (_.isEmpty(this.state.code)) return;
        const {code} = await this.props.user.bindShareCode(this.state.code);
        if (code === 200) {

                Actions.reset("RootTabs");

        } else {
            alertProxy("提示", "绑定失败,请检查分享码！", [{text: "我知道了"}])
        }
    };
    getShareCode = (code: string) => {
        this.setState({code});
    };

    _renderForm() {
        const inputProp = {
            icon: {
                name: "erweima",
                size: 16,
                color: "white"
            },
            inputStyle: {
                color: "#fff"
            },
            secureTextEntry: true,
            placeholder: "请输入分享码",
            getValue: this.getShareCode
        };
        return (
            <View style={{marginTop: 27}}>
                <CommonInput {...inputProp} />
            </View>)
    }

    render() {
        return (<View style={[ShareCodeStyles.container]}>
            <ScrollView bounces={false} showsVerticalScrollIndicator={false} style={styles.flex}>
                <Image source={require("../../assets/img/logo.png")}
                       style={{marginTop: 21, alignSelf: "center", ...roundWithSize(137)}}/>
                {this._renderForm()}
                <TouchableOpacity onPress={this.submitForm} style={[styles.centered, {
                    backgroundColor: "rgba(255,255,255,0.4)",
                    paddingVertical: 10,
                    marginTop: 45,
                    borderRadius: 30
                }]}>
                    <Text style={{color: "#fff", fontSize: 18}}>确定</Text>
                </TouchableOpacity>
            </ScrollView>
        </View>)
    }
}


const ShareCodeStyles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#629C36",
        paddingHorizontal: 20,
        paddingTop: "10%"
    }
});
